<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 730px;
				height: 120px;
				border: 1px solid #000;
				margin: 50px auto 0;
				position: relative;
				overflow: hidden;
			}
			#box li{
				list-style: none;
				float: left;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/1.png"/></li>
				<li><img src="img/2.png"/></li>
				<li><img src="img/3.png"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
			</ul>
		</div>
		
		
		<script type="text/javascript">
			var box = document.getElementById('box');
			var arrLi = box.getElementsByTagName('li');
			
			var imgWidth = 330;
			var gap = 100;
			var moveLeft = -1 * (imgWidth - gap) + 'px';
			
			function init(){
				for (var i = 0; i < arrLi.length; i++) {
					if (i === 0) {
						continue;
					}
					arrLi[i].style.left = imgWidth + (i - 1) * gap + 'px';
				}
			}
			
			
			function addEvent(){
				for (var i = 0; i < arrLi.length; i++) {
					arrLi[i].index = i;
					arrLi[i].onmouseenter = function(){
						for (var j = 1; j <= this.index; j++) {
							arrLi[j].style.marginLeft = moveLeft;
						}
						for (var k = this.index + 1; k < arrLi.length; k++) {
							arrLi[k].style.marginLeft = '';
						}
					}
					box.onmouseleave = function(){
						for (var i = 0; i < arrLi.length; i++) {
							arrLi[i].style.marginLeft = '';
						}
					}
				}
			}
			
			
			init();
			addEvent();
		</script>
	</body>
</html>
